<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>我要捐助</title>
    <script src="/js/mui.min.js"></script>
    <link rel="stylesheet" href="/css/sanzhangtu.css"/>
    <link href="/css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
    <script src="/js/jquery.js"></script>
    <script src="/js/Vue.js"></script>
    <!--	<script src="/js/bd.js"></script>-->
</head>
<style type="text/css">
    .clearfix {
        clear: both;
    }

    .mui-title {
        color: white;
    }



    .zhanwei {
        width: 100%;
        height: 44px;
    }

    .bgt {
        background: #333333;
    }

    .xx_date {
        background: #CCCCCC;
        width: 90%;
        text-align: center;
        margin: 10px auto;
        color: white;
    }

    .xx_list {
        background: white;
        width: 90%;
        margin: 5px auto;
        padding: 15px;
    }

    .xx_li_neir {
        font-size: 16px;
        color: #505050;
        height: auto;

    }

    .xx_li_ti {
        font-size: 18px;
        color: #000;
    }
    .newz{
        /*color:#000000;*/
        font-weight: bold;
        letter-spacing: 5px;
    }
    .mui-bar{
        background: #ec3131;
    }
    .diqu{
        margin-top: 50px !important;
        text-align: center
    }
    .diqu p{
        font-size:16px;
        letter-spacing: 3px;
    }
    .mui-title{
        font-size: 20px;
        margin-top: -6px !important;

    }
    /*时钟日期进入动画*/
    /*.sj{*/
    /*	animation:jb 1.5s;*/
    /*}*/
    /*@keyframes jb{*/
    /*	from{opacity:0}*/
    /*	to{opacity:1}*/
    /*}*/
    /*时钟:动画*/
    .s_s{
        animation:shanshuo 1s ;
        animation-iteration-count:infinite;
    }
    @keyframes shanshuo
    {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    .sj{
        /*display: none;*/
        color: #fff;
        font-size: 13px;
        margin-left: 31%;
        margin-top: 7.3%;
        /*font-family: monospace;*/
        /*font-weight: bold;*/
        opacity: 0;
    }
    .sj span{
        margin-left:-3px;
    }
    .fff{
        margin-right:-6px !important;
    }
    .qt{
        margin-top: 10px;
    }
    .qt p{
        color:red;
    }
    .zjj{
        text-align: center;
        color:#000000;
        background: #fff;
        padding: 10px;
        margin: 0px 20px 0px 20px;
    }
    .zjj p{
        color:#505050;
        letter-spacing: 3px;
    }
    .newimg{
        width: 100%;
        margin-top: 40px;
    }
    .mui-badge{
        background:yellow !important;
        color: red !important;
    }
    .newdd{
        color:#fff !important;
        border-left:solid 1px #fff ;
    }
    .xz{
        font-size:12px;
        color:#111111;
    }
    .xinxi{
        overflow:hidden;
        resize:none;
        height: 160px;
    }
    #wp{
        display: none;
    }
</style>
<body>
<div id="app" v-clock="">
    <header class="my-bar mui-bar mui-bar-nav">
        <!--		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
        <h1 class="mui-title newz">疫情物资捐助管理系统
        </h1>
        <div class="sj">
            <span class="fff" id="yer"></span>
            年
            <span class="fff" id="my"></span>
            月
            <span class="fff" id="t"></span>
            日&nbsp;
            <span id="hhh"></span>
            <span class="s_s">:</span>
            <span id="mmm"></span>
            <span class="s_s">:</span>
            <span id="sss"></span>
        </div>
        <!--		<a href="/home/locate" class="mui-btn mui-btn-danger mui-pull-right dingwei">-->
        <!--			<span class="mui-icon mui-icon-location"></span></a>-->
    </header>

<!--    <img class="newimg" src="/images/logoo.jpg" />-->
    <div class="diqu zjj" style="text-align:left">
        <p style="color:#000">1.请输入捐助人姓名</p>
    </div>
    <div class="zjj">
        <input id="name" name="name" type="text" style="width:100px;text-align:center;" placeholder="输入姓名" data-validate="required:请输入姓名" />
    </div>
    <div class="diqu zjj" style="text-align:left">
        <p style="color:#000">2.请选择要捐助的类型</p>

    </div>

    <!--消息体显示结构-->
    <ul class="mui-table-view mui-table-view-radio zjj xz" name="style">
        <li class="mui-table-view-cell mui-selected" >
            <a class="mui-navigate-right "  name="0"> 捐款 </a>
        </li>
        <li class="mui-table-view-cell " >
            <a class="mui-navigate-right" name="1"> 捐物品 </a>
        </li>
        <li class="mui-table-view-cell" >
            <a class="mui-navigate-right" name="2"> 捐款+物品 </a>
        </li>
    </ul>

    <div class="diqu zjj" style="text-align:left">
        <p style="color:#000">3.填写捐助资金或物品信息</p>

    </div>

    <div class="zjj">
        <input id="danjia" name="danjia" type="number" style="width:100px;text-align:center;" placeholder="输入金额" data-validate="required:请输入金额" />
        <textarea id="wp" name="xinxi" class="xinxi" placeholder="输入物品信息" data-validate="required:请输入物品信息" ></textarea>
    </div>

    <!--	底部顶出技术支持信息-->
    <div style="height:110px;text-align:center;">
        <P>技术支持：©廊坊市鸿星志金网络科技有限公司®</P>
        <a href="http://WWW.5Q88.CN"><P>WWW.5Q88.CN</P></a>
    </div>
    <!--底部导航栏-->
    <nav class="mui-bar mui-bar-tab">
        <a id="defaultTab" @click="tjsq" class="newdd mui-tab-item mui-active" href="tab-webview-subpage-about.html">
            <span class="mui-icon mui-icon-upload"></span>
            <span class="mui-tab-label" >数据提交</span>
        </a>
    </nav>
</div>
</body>
</html>
<script>
    var app=new Vue({
        el: "#app",
        data: {
            style:0
        },
        methods: {
            autoTextAreaHeight: function () {
                var o = this.target;
                o.style.height = o.scrollTop + o.scrollHeight + "px";
            },
            // 时间转换
            sj_nyrhms:function(sjc){
                var d=new Date();
                d.setTime(sjc * 1000);
                var h=d.getHours();//小时0-23
                var m=d.getMinutes();//分钟0-59
                var y=d.getFullYear();//年
                var my=d.getMonth()+1;//月
                var t=d.getDate();//日
                var s=d.getSeconds()//秒
                if(h<10){
                    h="0"+h;
                }
                if(m<10){
                    m="0"+m;
                }
                var ttt=y+'-'+my+'-'+t+' '+h+':'+m;
                return ttt;
            },

            tjsq:function(){
                var t=this;
                var danjia=$('#danjia').val();
                var dw=$('#wp').val();
                var name=$('#name').val();
                var data={
                    'danjia':danjia,
                    'xinxi':dw,
                    'style':t.style,
                    'name':name
                };
                $.post('tjj',data,function(e){
                    mui.alert(e.msg,function(){
                        location.href=e.url;
                    });
                },'json');

            }
        },
        mounted: function () {
            var t=this;
            ///选择捐助类型样式
            var lista = document.querySelector('.mui-table-view.mui-table-view-radio');
            lista.addEventListener('selected',function(e){
                var a=e.detail.el.innerText;
                str = a.replace(/\s*/g,"");
                switch (str) {
                    case '捐物品':
                        $("#wp").show();
                        $("#danjia").hide();
                        t.style=1;
                        // alert(t.style);
                        break;
                    case '捐款+物品':
                        $("#wp").show();
                        $("#danjia").show();
                        t.style=2;
                        // alert(t.style);
                        break;
                    case '捐款':
                        $("#wp").hide();
                        $("#danjia").show();
                        t.style=0;
                        // alert(t.style);
                        break;
                }



            });

            ///时钟显示
            function sz_xs(){
                var d=new Date();

                var h=d.getHours();//小时0-23
                var m=d.getMinutes();//分钟0-59
                var y=d.getFullYear();//年
                var my=d.getMonth()+1;//月
                var t=d.getDate();//日
                var s=d.getSeconds()//秒
                if(h<10){
                    h="0"+h;
                }
                if(m<10){
                    m="0"+m;
                }
                var ss=document.getElementById('sss');
                var tt=document.getElementById('t');
                var mmy=document.getElementById('my');
                var yer=document.getElementById('yer');
                var hh=document.getElementById('hhh');
                var mm=document.getElementById('mmm');
                ss.innerText=s;
                tt.innerText=t;
                mmy.innerText=my;
                yer.innerText=y;
                hh.innerText=h;
                mm.innerText=m;
                // console.log('a');
                $('.sj').css('opacity',1);
            }
            setInterval(sz_xs,1000);
        }


    });
</script>
